<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		
		<!-- 该设置用于适应多种设配（如pc、平板和手机等）设备 -->
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		
		<title>宜染在线</title>
		
		
		
		<style type="text/css">
		/*此处定义样式*/
		
		
		#app{
			
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
		
		#my-login{
			width:700px;
			height:400px;
			border:1px solid #CCCCCC;
			box-shadow: 0 0 8px 1px #DDDDDD;
			border-radius:10px;
			
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		
		#my-login>h1{
			font-size:60px;
			font-family: 楷体;
			font-weight: bold;
			color:#223366;
			margin-top:50px;
			margin-bottom:30px;
		}
		
		#my-login>div.my-input{			
			padding:8px 0;
			position: relative;
		}
		
		#my-login input{
			box-sizing: border-box;
			
			width:300px;
			height:45px;
            line-height:45px;
			
			border:1px solid #CCCCCC;
			border-radius:10px;
			
			outline:none;
			
			padding-left:55px;
			
			color:#223366;
		}
		
		#my-login label{
			position: absolute;
			top:21px;
			left:10px;
			
            font-size:14px;
			color:#223366;
		}
		
		#my-login input:hover{
			border:1px solid #00AAFF;
			box-shadow: 0 0 10px 1px #00AAFF;
		}
		
		#my-login>div.my-button{
			margin-top:30px;
		}
		
		#my-login button{
			box-sizing: border-box;
			
			width:300px;
			height:45px;
			
			border:1px solid #223366;
			border-radius:10px;
			
			outline:none;
			
			font-size:20px;
			
			background-color:transparent;
		}
		
		#my-login button:hover{
			
			background-color:#00CCEE;
			border:1px solid #00CCEE;			
			color:white;
		
		}
		
		#my-login button:active{			
			box-shadow: 0 0 8px 2px #00CCEE;
			font-weight:bold;
			
		}
		
		
		
		
		</style>
	</head>
	
	<body>
	<div id="app">
	
		<div id="my-login">
		
			<h1>宜染在线信息系统</h1>
			
			<div class="my-input">
				<label>账号：</label>
				<input type="text" v-model="user.u_id" />
			</div>
			
			<div class="my-input">
				<label>密码：</label>
				<input type="password" v-model="user.u_pwd" />
			</div>
			
			<div class="my-input my-button">
				<button @click.prevent="login"  >登&nbsp;&nbsp;录</button>
			</div>
		
		</div>
	</div>	
	</body>
	
	
	
	
	<script src="../../js/vue.min.js"></script>
    <script src="../../js/axios.min.js"></script>
	<script src="../../js/my.js"></script>
	<script src="../../js/jquery-3.3.1.slim.min.js"></script>
	<script src="../../layer/layer.js"></script>

	
		
	
	<script type="text/javascript">
	
	let vm = new Vue({
		el:'#app',
		data:{
			user:{}
		},
		methods:{
			login(){
				this.$myPost('/safty/login/user',this.user)
					.then( result => {
						//书写成功后额外执行的动作即可
						
						setTimeout(()=>{location.href="../../safty/home/index.html";},1200);
						
					})
			},
		}
	});
			
	</script>
	
	
</html>









